<template>
	<view class="layer">
		<IndexHead :config="navConfig" />
		
		<view class="table">
			<form action="">
				<label class="label1" for="">收货人：</label>
				<input class="one" confirmtype="text" placeholder="请填写收货人姓名"/><br>
				<hr>
				<label class="label1" for="">联系方式：</label>
				<input class="one" confirmtype="text" placeholder="请填写收货人手机号"/><br>
				<hr>
				<label class="label1" for="">所在地区：</label>
				<view class="two" type="default" @click="showMulLinkageThreePicker"><text>省、市、区</text></view><br>
				<hr>
				<label class="label1" for="">详细地址：</label>
				<textarea name="comment" id="comment" placeholder="请输入详细地址" placeholder-style="margin-left:15upx; margin-top:15upx"></textarea>
				<!-- <input class="two" confirmtype="text"/> -->
			</form>
		</view>
		
		<view class="table2">
			<form action="">
				<!-- <radio class="one" value="r2" color="#54B1FF" style="transform:scale(0.65)" /> -->
				<checkbox class="one" value="radio" color="#54B1FF" style="transform:scale(0.65)" />
				<label for="">设为默认地址</label>
			</form>
		</view>
	
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	// https://github.com/zhetengbiji/mpvue-picker
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
	// https://github.com/zhetengbiji/mpvue-citypicker
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'	
	// import cityData from '../../../common/city.data.js';
	
	export default{
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
			data(){
				return{
					navConfig: {
						backgroundColor: 'transparent',
						color: '#fff',
						common: {
							hasSearch: false,
							hasMenu: false,
							hasTitle: true,
							minHead: true,
						},
						left: {
							showPos: false,
					
						},
						mid: {
							title: '收货地址',
							hasSearchMid: false,
							rtext: '确认新增',
						},
						right: {
					
						}
					},
					
					// shouHuoRen:'收货人',
					// lianXiStyle:'联系方式',
					// suoZaiQuYu:'所在区域',
					// xiangXiAdress:'详细地址',
					
					
					curTabIndex: 0,
					// mulLinkageTwoPicker: cityData,
					cityPickerValueDefault: [0, 0, 1],
					themeColor: '#007AFF',
					pickerText: '',
					mode: '',
					deepLength: 1,
					pickerValueDefault: [0],
					pickerValueArray:[]
				}
			},
			methods: {
					onCancel(e) {
						console.log(e)
					},
					// 单列
					showSinglePicker() {
						this.pickerValueArray = this.pickerSingleArray
						this.mode = 'selector'
						this.deepLength = 1
						this.pickerValueDefault = [0]
						this.$refs.mpvuePicker.show()
					},
					// 二级联动选择
					showMulLinkageTwoPicker() {
						this.pickerValueArray = this.mulLinkageTwoPicker
						this.mode = 'multiLinkageSelector'
						this.deepLength = 2
						this.pickerValueDefault = [0, 0]
						this.$refs.mpvuePicker.show()
					},
					// 三级联动选择
					showMulLinkageThreePicker() {
						this.$refs.mpvueCityPicker.show()
					},
					onConfirm(e) {
						this.pickerText = JSON.stringify(e)
					}
				},
			onBackPress() {
			  if (this.$refs.mpvuePicker.showPicker) {
			  	this.$refs.mpvuePicker.pickerCancel();
			    return true;
			  }
			  if (this.$refs.mpvueCityPicker.showPicker) {
			  	this.$refs.mpvueCityPicker.pickerCancel();
			    return true;
			  }
			},
				onUnload() {
					if (this.$refs.mpvuePicker.showPicker) {
						this.$refs.mpvuePicker.pickerCancel()
					}
					if (this.$refs.mpvueCityPicker.showPicker) {
						this.$refs.mpvueCityPicker.pickerCancel()
					}
				}
		
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	
	.layer{
		background-color: #F6F6F6;
	}
	
	/* 表单 */
	.table{
		width: 750upx;
		height: 460upx;
		background-color: #fff;
		/* box-shadow: 0px 0px 15px 0px rgba(232,232,232,1); */
	}
	.table label{
		width: 150upx;
		height: 26upx;
		line-height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 29upx;
		margin-top: 34upx;
		float: left;
	}
	.table .one{  
		margin-left: 90upx;
		margin-top: 23upx;
		width: 415upx;
		height: 28upx;
		font-size: 26upx;
		/* font-family: PingFang SC Regular; */
		color: #999999;
		float: left;
		/* font-weight: bold; */
	}
	.table #comment{
		float: left;
		width: 415upx;
		height: 100upx;
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		border-radius: 10upx 10upx 10upx 10upx;
		margin-left: 90upx;
		margin-top: 31upx;
		font-size: 26upx;
	}
	.table hr{
		float: left;
		border: none;
		margin-left: 29upx;
		width: 721upx;
		height: 1upx;
		color: #F6F6F6;
		margin-top: 30upx;
	}
	.table .two{
		margin-left: 85upx;
		margin-top: 28upx;
		width: 415upx;
		height: 50upx;
		float: left;
		
	}
	.table .two text{
		font-size: 26upx;
		position: absolute;
		margin-left: 10upx;
		color: #999999;
		font-family: PingFang SC Regular;
	}
	
	/* 选择默认地址 */
	.table2{
		width: 750upx;
		height: 108upx;
		background-color: #fff;
		margin-top: 20upx;
	}
	.table2 label{
		width: 180upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 29upx;
		margin-top: 33upx;
		float: left;
		
	}
	.table2 .one{  
		margin-left: 29upx;
		margin-top: 29upx;
		width: 23upx;
		height: 23upx;
		float: left;
		/* background: rgba(51,51,51,1); */
	}
	/* .table2 image{
		margin-left: 350upx;
		margin-top: 23upx;
		width: 26upx;
		height: 26upx;
		opacity: 1;
		color: #333333;
	} */
	
</style>
